<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="绑定属性"
      :visible.sync="isVisible"
      width="540px"
      top="50px"
      class="group-dialog"
    >
      <div class="add-dialog-component">
        <el-card
          class="box-card"
          v-if="tablist"
          v-for="(item, index) in tablist"
        >
          <div slot="header" class="clearfix">
                <i class="el-icon-document" />
                <span>{{ item.name }}</span>
                <el-button type="text" style="cursor: pointer; float: right; padding: 3px 0" @click="deleteTab(index)">删除</el-button>
                <el-button type="text" style="cursor: pointer; float: right; padding: 3px 8px 0 0" @click="editTab(item)">编辑</el-button>
                <el-button type="text" style="cursor: pointer; float: right; padding: 3px 0"  @click="bindproperty(item)">添加</el-button>

                <!-- <el-dropdown
                  trigger="hover"
                  style="cursor: pointer; float: right; padding: 3px 0"
                >
                  <span class="el-dropdown-link">
                    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      class="clearfix"
                      @click.native="editTab(item)"
                    >
                      编辑
                    </el-dropdown-item>
                    <el-dropdown-item
                      class="clearfix"
                      @click.native="deleteTab(index)"
                    >
                      删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown> -->

              <!-- <div style="padding-top:12px;width:200px">
                <el-button type="text"  @click="bindproperty(item)">添加</el-button>
                <el-button type="text" @click="editTab(item)">编辑</el-button>
                <el-button type="text" @click="deleteTab(index)">删除</el-button>
              </div> -->
          </div>

          <div v-if="item.children">
            <div v-for="(items, indexs) in item.children" class="text item">
              <div style="display: flex; justify-content: space-between">
                <div>{{ items.name }}</div>
                <div style="display: flex; justify-content: space-between">
                  <el-button
                    type="text"
                    @click="editproperty(items, index, indexs)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="deteleproperty(items, index, indexs)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- <div style="text-align: center">
            <el-button type="text" @click="bindproperty(item)">添加</el-button>
          </div> -->
        </el-card>
      </div>
      <el-button class="addbtn" type="primary" size="small" @click="onSubmit">添加</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="isVisible=false">取消</el-button>
        <el-button type="primary" @click="addEditProperty">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="添加参数组"
      :visible.sync="paraArrayDialog"
      width="500px"
      :close-on-click-modal="false"
    >
      <div></div>
      <div>
        <el-form label-width="80px" :model="obj" :rules="userRules1">
          <el-form-item label="参数名称" prop="name">
            <el-input
              v-model="obj.name"
              placeholder="请输入参数名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paraArrayDialog = false">取 消</el-button>
        <el-button type="danger" @click="addParaArray">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="paraTitle"
      :visible.sync="paraDialog"
      width="500px"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          label-width="100px"
          :model="form"
          :rules="userRules"
          ref="ruleForm"
        >
          <el-form-item label="参数名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入内容"></el-input>
          </el-form-item>

          <el-form-item label="输入类型" prop="inputType">
            <el-select
              class="link-select__select"
              :popper-append-to-body="false"
              v-model="form.inputType"
              placeholder="请选择输入类型"
              @change="selectChanged"
            >
              <el-option
                v-for="item in options"
                :key="item.inputType"
                :label="item.name"
                :value="item.inputType"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="可选值"
            v-if="form.inputType == 0"
            prop="inputValues"
          >
            <el-select
              v-model="form.inputValues"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择可选值"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="是否可搜索"
            v-if="form.inputType == 0"
            prop="isIndex"
          >
            <el-radio v-model="form.isIndex" :label="0">否</el-radio>
            <el-radio v-model="form.isIndex" :label="1">是</el-radio>
          </el-form-item>

          <el-form-item label="排序" prop="sort">
            <el-input
              v-model="form.sort"
              type="number"
              placeholder="请输入排序值"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paraDialog = false">取 消</el-button>
        <el-button type="danger" @click="addPara('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { AttrclassifyId, brandattr } from "@/api/renovation";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "add",
    },
    classifyId: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    "form.inputType"(val, oldval) {
      console.log(val, oldval);
    },
    deep: true,
  },
  data() {
    return {
      userRules1: {
        name: [{ required: true, message: "请输入参数名称", trigger: "blur" }],
      },
      userRules: {
        name: [{ required: true, message: "请输入参数名称", trigger: "blur" }],
        inputType: [
          { required: true, message: "请选择输入类型", trigger: "blur" },
        ],
        inputValues: [
          { required: true, message: "请输入可选值", trigger: "blur" },
        ],
        isIndex: [
          { required: true, message: "请选择是否可搜索", trigger: "blur" },
        ],
      },
      paraTitle: "", //参数标题
      parastatus: 0, //0添加参数，1编辑参数
      row: {}, //tab栏目内容
      indexs: 0,
      tabEditStatus: false, //true为编辑 false为新增
      obj: {
        sort: 0,
        name: "",
        id: "",
      },
      options1: [],
      value: [],
      property: "",
      tablist: [],
      children: [],
      paraDialog: false,
      options: [
        {
          name: "下拉选",
          inputType: 0,
        },
        {
          name: "手动输入",
          inputType: 1,
        },
      ],
      form: {
        id: 0,
        inputType: "",
        inputValues: [],
        isIndex: "",
        name: "",
        sort: "0",
      },
      input: "", //
      paraArrayDialog: false, //添加参数组
    };
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible;
      },
      set() {
        this.close();
        this.reset();
        this.success();
      },
    },
  },
  created() {
    AttrclassifyId(this.classifyId).then((res) => {
      this.tablist = res.data;
    });
  },
  methods: {
    //二级属性的删除
    deteleproperty(items, index, indexs) {
      console.log(index, indexs, "jdjdjskjdksjdkj");
      this.tablist.forEach((item, index1) => {
        console.log(index, index1, "进来了1");
        if (index == index1) {
          item.children.forEach((items, index2) => {
            console.log(index2, indexs, "进来了2");
            if (index2 == indexs) {
              console.log(item, this.form, "测试查看内容****************&&&7");
              // items=this.form
              this.$delete(item.children, index2);
              // item.children.splice(index2,1)
            }
          });
        }
      });
      this.$forceUpdate();
    },
    //二级属性的编辑
    editproperty(row, index, indexs) {
      this.form = row;
      this.paraDialog = true;
      this.paraTitle = "编辑参数";
      localStorage.setItem("index", index);
      localStorage.setItem("indexs", indexs);
    },
    editTab(row) {
      this.paraArrayDialog = true;
      this.obj = row;
      this.tabEditStatus = true;
    },
    deleteTab(index) {
      this.tablist.splice(index, 1);
    },
    addEditProperty(ruleForm) {
      let obj = {
        classifyId: this.classifyId,
        list: this.tablist,
      };


      brandattr(obj).then((res) => {
        console.log(res, "()()()()(");
        this.success();
      });
    },

    //点击添加参数确定按钮
    bindproperty(row) {
      this.paraTitle = "新增参数";
      this.row = row;
      //清空输入框
      this.form = {
        id: 0,
        inputType: "",
        inputValues: [],
        isIndex: "",
        name: "",
        sort: "0",
      };
      this.tabEditStatus = false;
      this.paraDialog = true;
    },

    //添加参数组
    addParaArray() {
      this.paraArrayDialog = false;
      let obj = {
        sort: this.obj.sort,
        name: this.obj.name,
        id: this.obj.id,
      };
      console.log(this.tabEditStatus, "********7777777777777");
      if (!this.tabEditStatus) {
        this.tablist.push(obj);
        //清空obj
        this.obj = {
          sort: 0,
          name: "",
          id: "",
        };
      }
      // this.tabEditStatus = false;
    },
    selectChanged() {},
    sure() {
      // this.paraArrayDialog = false;
      // let obj = {property:this.property};
      // this.tablist.push(obj)
    },
    //添加参数
    addPara(ruleForm) {
      let form = {
        id: this.form.id,
        inputType: this.form.inputType,
        inputValues: this.form.inputValues,
        isIndex: this.form.isIndex,
        name: this.form.name,
        sort: this.form.sort,
      };
      if (!this.tabEditStatus) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.paraDialog = false;
            this.tablist.forEach((item) => {
              if (item.name == this.row.name) {
                if (!item.children) item.children = [];
                item.children.push(form);
              }
            });
          } else {
            return false;
          }
        });
      } else {
        let index = localStorage.getItem("index");
        let indexs = localStorage.getItem("indexs");
        this.paraDialog = false;
        this.tablist.forEach((item, index1) => {
          if (index == index1) {
            item.children.forEach((items, index2) => {
              if (index2 == indexs) {
                items = form;
              }
            });
          }
        });
      }
      this.form = {
        id: 0,
        inputType: "",
        inputValues: [],
        isIndex: "",
        name: "",
        sort: "0",
      };
    },
    reset() {
      this.treeData = [];
    },
    close() {
      this.$emit("close");
    },
    success() {
      console.log("fr7e8fr778");
      this.$emit("success");
    },
    onSubmit() {
      this.obj = {
        sort: 0,
        name: "",
        id: "",
      };
      this.paraArrayDialog = true;
    },
  },
};
</script>
<style lang="scss">
.add-dialog-component {
  display:flex;
  flex-direction: column;
  justify-content:center;
}
.addbtn {
  margin-top:20px;
  width:80px;
}
.text {
  font-size: 14px;
}

.item {
  // margin-bottom: 18px;
}

// .clearfix {
//   display:flex;
//   flex-direction:row;
//   justify-content: space-between;
// }

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top:10px;
  width: 480px;
}
</style>
<style lang="scss" scoped>
</style>
